<template>
	<view class="form-container">
		<!-- 	<text class="header-text">新增传感器设备</ -->text>
		<view class="example">
			<uni-forms ref="deviceForm" :modelValue="formData" :rules="rules" class="form-container-box">
				<!-- 设备名称 -->
				<uni-forms-item label="设备名称" required name="deviceName" class="info-item">
					<uni-easyinput v-model="formData.deviceName" placeholder="请输入设备名称" />
				</uni-forms-item>
				<!-- 设备标识 -->
				<uni-forms-item label="设备标识" required name="deviceId" class="info-item">
					<uni-easyinput v-model="formData.deviceId" placeholder="请输入设备标识" />
				</uni-forms-item>
				<!-- 设备类型 -->
				<uni-forms-item label="设备类型" required name="deviceType" class="info-item">
					<uni-data-select v-model="formData.deviceType" :localdata="deviceTypes" />
				</uni-forms-item>
				<!-- 设备地址 -->
				<uni-forms-item label="串口地址" required name="deviceAddress" class="info-item">
					<uni-easyinput v-model="formData.deviceAddress" placeholder="请输入设备地址" />
				</uni-forms-item>
				<!-- 设备端口 -->
				<uni-forms-item label="COM口" required name="devicePort" class="info-item">
					<uni-data-select v-model="formData.devicePort" :localdata="portOptions" />
				</uni-forms-item>
			</uni-forms>

			<!-- 操作按钮 -->
			<view class="footer-btn">
				<button form-type="reset" class="reset" @click="reset()">重置</button>
				<button type="primary" form-type="submit" class="submit" @click="add()">确认</button>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive,
		ref
	} from 'vue';
	import { WEB_URL } from '../../config/global';

	const formData = reactive({
		deviceName: "",
		deviceId: "",
		deviceType: "",
		deviceAddress: "",
		devicePort: "",
	})

	// 下拉选项数据源
	const deviceTypes = [{
		text: '温湿度',
		value: '1'
	},
	{
		text: '水浸',
		value: '2'
	},
	{
		text: '烟感',
		value: '3'
	}
	];

	const protocolTypes = [{
		text: '协议1',
		value: 'protocol1'
	},
	{
		text: '协议2',
		value: 'protocol2'
	}
	];

	const portOptions = [{
		text: 'COM1',
		value: 'COM1'
	},
	{
		text: 'COM2',
		value: 'COM2'
	},
	{
		text: 'COM3',
		value: 'COM3'
	},
	{
		text: 'COM4',
		value: 'COM4'
	}
	];

	const platformNames = [{
		text: '平台A',
		value: 'platformA'
	},
	{
		text: '平台B',
		value: 'platformB'
	}
	];

	// 校验规则
	const rules = {
		deviceName: {
			rules: [{
				required: true,
				errorMessage: '设备名称不能为空'
			}]
		},
		deviceId: {
			rules: [{
				required: true,
				errorMessage: '设备标识不能为空'
			}]
		},
		deviceType: {
			rules: [{
				required: true,
				errorMessage: '请选择设备类型'
			}]
		},
		deviceAddress: {
			rules: [{
				required: true,
				errorMessage: '串口地址不能为空'
			}]
		},
		devicePort: {
			rules: [{
				required: true,
				errorMessage: '请选择COM口'
			}]
		}
	};

	// 表单引用，用于触发校验等操作
	const deviceForm = ref(null);


	const add = async () => {
		const valid = await deviceForm.value.validate();
		if (valid) {
			console.log('提交的数据:', formData);
			// 提交设备 -> 清空表单 -> 跳回sensorConfigure
			let array = []
			let device = { name: formData.deviceName, type: formData.deviceType, sn: formData.deviceId, comno: formData.devicePort, comaddr: formData.deviceAddress }
			array.push(device)
			let param = { data: array }
			uni.request({
				url: WEB_URL + '/app/addSensor',
				data: param,
				method: 'POST',
				header: {
					'Content-Type': 'application/x-www-form-urlencoded'
				},
				dataType: 'json',
				success: (response) => {
					console.log('success：', response);
					uni.showToast({
						title: '添加成功',
						icon: 'none'
					});
				},
				fail: (err) => {
					console.log('error：', err);
				},
			})
		} else {
			//校验失败
		}
	}

	const reset = () => {
		formData.deviceAddress = ""
		formData.deviceId = ""
		formData.deviceName = ""
		formData.devicePort = ""
		formData.deviceType = ""
	}
</script>

<style>
	/* 全局字体大小 */
	.form-container {
		font-size: 16px;
		padding: 20px;
	}

	.header-text {
		font-size: 24px;
		color: #333;
		display: flex;
		justify-content: center;
		/* margin-bottom: 30px; */
	}

	.example {
		padding: 20px;
	}

	/* 表单容器 */
	.form-container-box {
		padding: 20px;
		border-radius: 8px;
		font-size: 18px;
	}

	/* 表单项 */
	.info-item {
		margin-bottom: 24px;
		font-size: 18px;
	}

	.uni-forms-item {
		display: flex;
		align-items: center;
	}

	.uni-forms-item__label {
		font-size: 18px;
		width: 120px;
		/* 固定标签宽度 */
		text-align: right;
		padding-right: 10px;
		/* 增加标签与输入框之间的间距 */
		box-sizing: border-box;
	}

	.uni-easyinput,
	.uni-data-select {
		font-size: 18px;
		padding: 10px 0;
		border-radius: 4px;
		width: 100%;
	}

	.uni-easyinput__placeholder-class {
		font-size: 16px;
	}

	/* 按钮 */
	.footer-btn {
		display: flex;
		justify-content: center;
		margin-top: 30px;
	}

	.submit,
	.reset {
		font-size: 18px;
		padding: 0 30px;
		margin: 0 10px;
		border-radius: 8px;
	}

	.submit {
		background-color: #48b0b1 !important;
	}

	.reset {
		background-color: #f4f4f4;
		/* color: #333; */
	}



	.uni-easyinput__content-input {
		font-size: 18px;
	}

	.uni-forms-item__label {
		font-size: 18px !important;
		width: 100px !important;
	}

	.uni-easyinput__placeholder-class {
		font-size: 18px !important;
	}
</style>